<template>
  <div class="about">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="密码" />
      </el-form-item>
      <div class="submit">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      ruleForm: {
        username: "Admin",
        password: "",
        remember: true,
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度应为3到5个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "密码是123456", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleFormRef.validate(async valid => {
        if (valid) {
          // 模拟加载效果和验证逻辑
          setTimeout(() => {
            if (this.ruleForm.username === "Admin" && this.ruleForm.password === "123456") {
              // 模拟生成 token 并存储在 localStorage 中
              localStorage.setItem('token', 'example-token');
              this.$router.push("/");
              setTimeout(() => {
                ElMessage.warning("Token已失效，请重新登录");
                localStorage.removeItem("token");
              }, 30 * 60 * 1000);
            } else {
              ElMessage.error("用户名或密码错误");
            }
          }, 1000);
        } else {
          console.log("验证失败！");
        }
      });
    },
    resetForm() {
      this.$refs.ruleFormRef.resetFields();
    },
  },
};
</script>
<template>
  <div class="about">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="用户名" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" type="password" placeholder="密码" />
      </el-form-item>
      <div class="submit">
        <el-button type="primary" @click="submitForm">登录</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      ruleForm: {
        username: "Admin",
        password: "",
        remember: true,
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度应为3到5个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "密码是123456", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.ruleFormRef.validate(async valid => {
        if (valid) {
          // 模拟加载效果和验证逻辑
          setTimeout(() => {
            if (this.ruleForm.username === "Admin" && this.ruleForm.password === "123456") {
              // 模拟生成 token 并存储在 localStorage 中
              localStorage.setItem('token', 'example-token');
              this.$router.push("/");
              setTimeout(() => {
                ElMessage.warning("Token已失效，请重新登录");
                localStorage.removeItem("token");
              }, 30 * 60 * 1000);
            } else {
              ElMessage.error("用户名或密码错误");
            }
          }, 1000);
        } else {
          console.log("验证失败！");
        }
      });
    },
    resetForm() {
      this.$refs.ruleFormRef.resetFields();
    },
  },
};
</script>
<style scoped>
.about {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器高度充满整个视口 */
}

/* 如果有必要，可以为表单本身添加一些内外边距以改善外观 */
.el-form {
  width: 100%; /* 或者设定一个固定的宽度，比如 300px */
  max-width: 400px; /* 限制表单的最大宽度，以优化不同屏幕尺寸下的显示 */
  padding: 20px;
  background-color: #fff; /* 为表单添加背景色，以提高可读性和美观性 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 5px; /* 添加圆角 */
}
.submit {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 可选，为了与表单项之间有一点间距 */
}

/* 如果需要调整按钮间的间距，可以这样做 */
.submit .el-button + .el-button {
  margin-left: 10px; /* 根据需要调整间距 */
}
</style>
